<template>
	<view class="activeLine">
		<view class="all">
			<view style="text-align: center;font-size: 15rpx;color: #ccc;">
				<hlUploadImg ref="hlUploadImg" :maxCount="1" class="feier" :imgStyle="imgStyle" @uploaded="uploadRes">
				</hlUploadImg>
				<text style="font-size: 18px;color: #000000;position: relative;right: 150rpx;">房源主图</text>
				<text>好的照片能帮您更快促进交易</text>
			</view>
		</view>
		<view class="anchor">
			<view class="ao">
				<view class="bold">
					压付方式
				</view>
				<view class="box4">

					<view class="box4">
						<view class="box1">
							<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value=""
								placeholder="请输入压付方式" v-model="yafu" />
						</view>
					</view>
				</view>
			</view>
			<view class="appp">
				<view class="bold">
					房源名称
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value=""
							placeholder="请输入房源名称" v-model="name" />
					</view>
				</view>
			</view>
			<view class="appp">
				<view class="bold">
					商铺地址
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value=""
							placeholder="请输入商铺地址" v-model="address" />
					</view>
				</view>
			</view>

			<view class="appp">
				<view class="bold">
					楼层
				</view>
				<view class="box4">

					<view class="box4">
						<view class="box1">
							<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value=""
								placeholder="请输入楼层" v-model="floor" />
						</view>
					</view>
				</view>
			</view>

			<view class="appp">
				<view class="bold">
					装修类型
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value=""
							placeholder="请输入装修类型" v-model="ztype" />
					</view>
				</view>
			</view>

			<view class="appp">
				<view class="bold">
					户型
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value="" placeholder="请输入户型"
							v-model="htype" />
					</view>
				</view>
			</view>

			<view class="appp">
				<view class="bold">
					面宽
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value="" placeholder="请输入面宽"
							v-model="kuan" />
					</view>
				</view>
			</view>
			<view class="appp">
				<view class="bold">
					租金
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value="" placeholder="请输入租金"
							v-model="zujin" />
					</view>
				</view>
			</view>
			<view class="appp">
				<view class="bold">
					房屋总价值
				</view>
				<view class="box4">
					<view class="box1">
						<input style="background-color: #FFFFFF;width: 255rpx;" type="text" value=""
							placeholder="请输入房屋总价值" v-model="total" />
					</view>
				</view>
			</view>
		</view>
		<view class="hljs-attribute">
			<view class="ao">
				<view class="bold">
					所在区域
				</view>
				<view class="box4">
					<picker @change="bindAreaChange" :value="index" :range="att">
						<view class="box1">
							{{att[index]}}
							<image class="boot" src="../../static/imges/you.png" mode=""></image>
						</view>
					</picker>
				</view>
			</view>

			<view class="appp">
				<view class="bold">
					所属大厦
				</view>
				<view class="box4">
					<picker @change="bindPickerChange" :value="index" :range="arr">
						<view class="box1">
							{{arr[index]}}
							<image class="boot" src="../../static/imges/you.png" mode=""></image>
						</view>
					</picker>
				</view>
			</view>
		</view>

		<view class="box5" @click="huan">
			下一步
		</view>
	</view>
</template>

<script>
	import hlUploadImg from "@/components/hl-uploadImg/hlUploadImg.vue";
	import instance from '../../api/requset.js'
	export default {
		components: {
			hlUploadImg
		},
		data() {
			return {
				title: 'picker',
				array: ['请选择', '长沙', '株洲', '湘潭'],
				att: ['请选择', '上城区', '下城区', '江干区', '拱墅区', "西湖区", "滨江区", "萧山区", "余杭区", "淳安县", "建德市", "富阳区", "临安市", "其它区"],
				timi: ['请选择', '1楼', '2楼', '3楼', '4楼'],
				juan: ['请选择', '普通装修', '精装修', '豪华装修'],
				arr: ['请选择', '一梯一户', '一梯两户', '一梯三户', '两梯三户'],
				test: ['请选择', '一梯一户', '一梯两户', '一梯三户', '两梯三户'],
				sites: ['请选择', '一梯一户', '一梯两户', '一梯三户', '两梯三户'],
				teme: ['请选择', '一梯一户', '一梯两户', '一梯三户', '两梯三户'],
				index: 0,
				imgStyle: {
					width: '95%',
					height: '240rpx'
				},
				yafu: '', //压付
				name: '', //名称
				address: '', //地址
				floor: '', //楼层
				ztype: '', //类型
				htype: '', //户型
				kuan: '', //面宽
				zujin: '', //租金
				total: '', //总价值
				area: '', //所属区域,
				dasha: '' //所属大厦
			};
		},
		onLoad() {
			console.log(hlUploadImg,"上传图片")
		},
		methods: {
			uploadRes(res) {
				console.log(res, "图片查看")
				// doSomething...
				// this.allUploadedImg=res.allImages;        //所有图片url数组（可以用于提表单提交）
				// this.thisUploadedImg=res.thisUploadedImages      //本次上传url数组
			},
			bindPickerChange: function(e) {
				this.index = e.target.value
				this.dasha = this.arr[e.target.value]
			},
			bindAreaChange: function(e) {
				this.index = e.target.value
				this.area = this.att[e.target.value]
			},
			myUpload(rsp) {
				const self = this;
				self.imgurl = rsp.path;
			},
			huan() {
				var serverUrl = instance.serverUrl
				if (this.index == 0 || this.index2 == 0 || this.index3 == 0 || this.index4 == 0 || this.index5 == 0 || this
					.index6 ==
					0 || this.index7 == 0 || this.index8 == 0) {
					uni.showToast({
						title: '其他选项不能为空',
						duration: 2000,
						icon: 'none'
					});
				} else {
					uni.navigateTo({
						url: `./Housing?yafu=${this.yafu}&name=${this.name}&address=${this.address}&floor=${this.floor}&ztype=${this.ztype}&htype=${this.htype}&kuan=${this.luan}&zujin=${this.zujin}&total=${this.total}&area=${this.area}&dasha=${this.dasha}`
						// yafu:'',//压付
						// name:'',//名称
						// address:'',//地址
						// floor:'',//楼层
						// ztype:'',//类型
						// htype:'',//户型
						// kuan:'',//面宽
						// zujin:'',//租金
						// total:'',//总价值
						// area:'',//所属区域,
						// dasha:''//所属大厦
					})
				}
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #F4F4F4;
	}

	input {
		color: #000000;
	}

	.all {
		width: 95%;
		height: 320rpx;
		margin-left: 2.5%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}

	.anchor {
		width: 95%;
		height: 740rpx;
		margin-left: 2.5%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}

	.boot {
		width: 30rpx;
		height: 30rpx;
		position: relative;
		top: 5rpx;
		left: 10rpx;
	}

	.ao,
	.box4 {
		display: flex;
	}

	.ao,
	.appp {
		justify-content: space-between;
		position: relative;
		top: 30rpx;
		margin: 0 20rpx 0 20rpx;
	}

	.appp {
		display: flex;
		margin-top: 40rpx;
	}

	.box1 {
		color: #A1A1A1;
	}

	.hljs-attribute {
		width: 95%;
		height: 200rpx;
		margin-left: 2.5%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}

	.box5 {
		width: 80%;
		margin-left: 10%;
		margin-top: 100rpx;
		border-radius: 20rpx;
		height: 80rpx;
		margin-bottom: 20rpx;
		text-align: center;
		color: #fff;
		line-height: 80rpx;
		font-size: 30rpx;
		background-color: #0958A9;
	}

	.feier {
		margin-left: 2.5%;
	}
</style>
